<template>
	<view class="u-page">
	<nav-bar title="用车申请详情"></nav-bar>
		<view class="u-page__item">
			<uni-list>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">订单号</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.ordernumber}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车人</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usemanname}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车人电话</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usemantel}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车人数</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usemancount}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">申请用车开始时间</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usebegindate}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">申请用车结束时间</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.useenddate}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">出发地</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usebeginaddress}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">目的地</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.useendaddress}}</text>
					</template>
				</uni-list-item><uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车事由</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usereason}}</text>
					</template>
				</uni-list-item><uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车备注</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usemark}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车区域</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{ getArea(unitObject.iscity)}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">申请部门</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.departname}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">申请单位</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.usercompanyname}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">状态</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{getStatusResult(unitObject.applystatus) }}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">审核人</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.auditer}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">审核时间</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.auditdate}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">审批人</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.approver}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">审批时间</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.approvedate}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">审批结果</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.approveresult}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">评价时间</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.gradedate}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">用车类型和数量</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.carmodeltext}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">接单的社会化保障企业</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.companyname}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">负责人</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.companymanname}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">负责电话</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.companymantel}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">派车单备注</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.mark}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">实际车辆类型</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.carmodeltext}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">车辆实际品牌</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.carbrandsys}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">车牌号</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.carname}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">里程（公里）</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.drivendistance}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">裸车费用（元）</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.nudefare}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">实际费用（元）</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.truefare}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">总费用（元）</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.custom_cost}}</text>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:header>
						<text class="slot-box slot-title">使用评价</text>
					</template>
					<template v-slot:footer>
						<text class="slot-content">{{unitObject.total}}</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { getSYListDetail } from '@/api/use';
	import NavBar from '@/components/NavBar.vue';
	// 申请id
	const unitId = ref('')
	//用车id
	const apid = ref('')
	//派单id
	const seid = ref('')
	const unitObject = ref({
		
	})
	const areaOption = ref([
		{
			label:'长途',
			value:'0'
			
		},
		{
			label:'市内',
			value:'1'
			
		}
		])
		const auditResults = ref( [
		  {
		    value: "0",
		    label: "待审核",
		  },
		  {
		    value: "1",
		    label: "待审批",
		  },
		  {
		    value: "2",
		    label: "审批通过",
		  },
		  {
		    value: "3",
		    label: "调度完毕",
		  },
		  {
		    value: "4",
		    label: "司机出车登记",
		  },
		  {
		    value: "5",
		    label: "司机回执订单结束",
		  },
		  {
		    value: "6",
		    label: "审核被拒结束",
		  },
		  {
		    value: "7",
		    label: "审批被拒结束",
		  },
		  {
		    value: "8",
		    label: "超时",
		  },
		  {
		    value: "9",
		    label: "调度前取消订单",
		  },
		  {
		    value: "10",
		    label: "调度后取消订单",
		  },
		  {
		    value: "101",
		    label: "简版用车待审批",
		  },
		  {
		    value: "11",
		    label: "跳转集中平台",
		  },
		  {
		    value: "12",
		    label: "变更等待审核",
		  },
		  {
		    value: "13",
		    label: "变更已审核",
		  },
		  {
		    value: "14",
		    label: "变更审核不通过",
		  },
		  {
		    value: "15",
		    label: "变更审批通过",
		  },
		  {
		    value: "16",
		    label: "变更审批不通过",
		  },
		  {
		    value: "17",
		    label: "待审批人2审批",
		  },
		  {
		    value: "18",
		    label: "审批人2审批不通过",
		  },
		  {
		    value: "19",
		    label: "调度排队中",
		  },
		  {
		    value: "20",
		    label: "通过",
		  },
		])
	// 通过事件通道获取单位id
	onLoad((option) => {
		unitId.value = option.id
		apid.value = option.apid
		seid.value = option.seid
		serverApplyDetail()
	})
	
	function serverApplyDetail(){
		let params = {
			id:unitId.value,
			apid:apid.value,
			seid:seid.value
		}
		getSYListDetail(params).then(res => {
			if(res.code === 1){
				unitObject.value = res.data;
			}else{
				
			}
		})
	}
	
	function getArea(value){
		let obj = areaOption.value.find(item=>{
			if(item.value == value){
				return item
			}
		})
		if(obj!=undefined||obj!=null){
			return obj.label
		}
	}
	function getStatusResult(value){
		let obj = auditResults.value.find(item=>{
			if(item.value == value){
				return item
			}
		})
		if(obj!=undefined||obj!=null){
			return obj.label
		}
	}
</script>

<style lang="scss" scoped>
	.u-page {
		padding: 0;

		&__item {
			background-color: #fff;

			&__list {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				color: #797E84;
				font-size: 13px;

				&__title {
					color: #333;
					font-size: 14px;
				}
			}


			&__title {
				color: #333;
				background-color: #fff;
				padding: 15px;
				font-size: 15px;

				&__slot-title {

					font-size: 14px;
				}
			}

			&__table {
				&__item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px;
					flex: 1;

					&__left {
						color: #797E84;
						font-size: 13px;
					}

					&__right {
						display: flex;
						justify-content: space-around;
						align-items: center;
						color: #333;
						font-size: 14px;

						&__box {
							width: 40px;
							height: 40px;

							text-align: center;

						}
					}
				}
			}
		}
	}

	.u-collapse-content {

		font-size: 14px;
	}
	.slot-content{
		font-size: 16px;
		color: #333;
		float: right;
	}
	.slot-title{
		font-size: 16px;
		color: #999;
	}
</style>